<template>
  <el-table
    :data="
      tableData.listdata.slice(
        (currentPage - 1) * pageSize,
        currentPage * pageSize
      )
    "
    stripestyle="width: 100%"
  >
    <el-table-column prop="Carnum" label="来访车辆牌号" />
    <el-table-column prop="Cometime" label="入区时间" />
    <el-table-column prop="Gotime" label="离区时间" />
    <el-table-column prop="Doing" label="入区目的" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
    <el-table-column width="80">
      <template #header="scope">
        <el-button
          size="mini"
          @click="handleAdd(scope.$index, scope.row)"
          type="primary"
          >添加</el-button
        >
      </template>
    </el-table-column>
    <el-table-column>
      <template #header>
        <el-input
          v-model="search"
          size="small"
          placeholder="请输入查询内容(车主姓名))"
          @blur="handleSearch"
        />
      </template>
    </el-table-column>
  </el-table>
  <div class="bottom">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.listdata.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <DrawerAdd />
  </div>
</template>

<script lang="ts" setup>
import DrawerAdd from "@/components/CarComponents/DrawerAdd.vue";
import { ref, onMounted, reactive } from "vue";
import link from "@/api/link.js";
import apiUrl from "@/api/url.js";
import { useStore } from "vuex";
let search = ref("");
let store = useStore();

// 分页
const currentPage = ref(1);
const pageSize = ref(5);
const handleSizeChange = (val) => {
  pageSize.value = val;
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
};
// 搜索
const handleSearch = () => {
  link(apiUrl.ForeignVehicles, "GET", {}, { Carnum: search.value }).then(
    (resolve: { data: never[] }) => {
      tableData.listdata = resolve.data;
    }
  );
};

// 表格数据
const tableData = reactive({
  listdata: [],
});
// 接口数据
interface User {
  date: string;
  name: string;
  address: string;
}
const handleDelete = (index: number, row: User) => {
  store.dispatch("DEL_OUTSIDE", row);
};
const handleAdd = (index: number, row: User) => {
  store.commit("SET_DIALOG", row);
};
onMounted(() => {
  link(apiUrl.ForeignVehicles).then((resolve) => {
    tableData.listdata = resolve.data;
  });
  store.dispatch(" FOREIGNVEHICLES_LIST");
});
</script>
